<template>
  <div class="menu-content">
    <Tabs v-model="showTab" type="card">
      <TabPane label="后台菜单" name="1"></TabPane>
      <!-- <TabPane label="小程序菜单" name="2"></TabPane>
      <TabPane label="APP菜单" name="3"></TabPane> -->
    </Tabs>
    <div class="flex flex-horizontal-between tree-content">
      <div class="tree">
        <Tree :data="permissionData" ref="treeRef" @on-select-change="treeSelectChange"></Tree>
      </div>
      <!--展示菜单详情-->
      <div v-if="menuMsgInfo.parentId !== ''" style="position: absolute; right: 300px">
        <dt-info ref="msgRef"></dt-info>
        <div class="flex flex-horizontal-between">
          <Button @click="delFun" v-if="!subFlag">删除</Button>
          <Button style="margin-left: 8px" v-if="subFlag" @click="cancelFun">取消</Button>
          <Button type="success" @click="saveFun">保存</Button>
          <Button type="primary" @click="createSubMenu" v-if="menuMsgInfo.menuLevel < 5 && !subFlag">
            创建子菜单
          </Button>
        </div>
      </div>
    </div>
    <dt-loading ref="loadingRef" :loading="loading"></dt-loading>
  </div>
</template>

<script setup>
  import { watch, onMounted, reactive, ref, nextTick } from 'vue'
  import { editOpt } from './biz/edit'
  import { subOpt } from './biz/sub'
  import dt from '@dt/dt'
  import menuMgr from './biz/index'
  import permissionMgr from '@/biz/permission'

  const [treeRef, msgRef] = [ref(), ref()]
  const loading = ref(false)
  const showTab = ref('1')
  const menuMsgInfo = reactive({
    parentId: '',
    parentTitle: '',
    id: '',
    menuCode: '',
    menuLevel: '',
    title: '',
    menuType: '',
    childNum: 0
  })

  const menuSubInfo = reactive({
    parentId: '',
    parentTitle: '',
    title: '',
    menuType: ''
  })

  const permissionData = ref([])
  const subFlag = ref(false)

  onMounted(() => {
    getPermissionData()
  })

  watch(showTab, (newVal) => {
    menuMsgInfo.parentId = ''
    subFlag.value = false
    getPermissionData()
  })

  function getPermissionData() {
    loading.value = true
    let params = {
      menuItem: showTab.value
    }
    permissionMgr
      .saMenuList(params)
      .then((res) => {
        permissionData.value = res
        loading.value = false
      })
      .catch((err) => {
        loading.value = false
      })
  }

  function treeSelectChange(val) {
    subFlag.value = false
    if (val.length != 0) {
      let checkNode = val[0]
      menuMsgInfo.id = checkNode.id
      menuMsgInfo.parentId = checkNode.menuLevel == 0 ? '无上级菜单ID' : checkNode.parentId
      menuMsgInfo.parentTitle =
        checkNode.menuLevel == 0 ? '无上级菜单名称' : recursionTree(permissionData.value, checkNode.parentId)
      menuMsgInfo.title = checkNode.title
      menuMsgInfo.menuLevel = checkNode.menuLevel.toString()
      menuMsgInfo.menuCode = checkNode.menuCode
      menuMsgInfo.menuType = checkNode.menuType
      menuMsgInfo.childNum = checkNode.children.length
      nextTick(function () {
        msgRef.value.init(new editOpt(), menuMsgInfo)
      })
    } else {
      menuMsgInfo.parentId = ''
    }
  }
  function recursionTree(arr, parentId) {
    arr.forEach((item) => {
      if (item.id == parentId) {
        menuMsgInfo.parentTitle = item.title
      } else {
        recursionTree(item.children, parentId)
      }
    })
    return menuMsgInfo.parentTitle
  }

  function createSubMenu() {
    if (menuMsgInfo.childNum >= 99) {
      dt.ui.Message.info('每级至多可添加99个“菜单项”')
      return false
    }
    subFlag.value = true
    menuSubInfo.id = menuMsgInfo.id
    menuSubInfo.parentTitle = menuMsgInfo.title
    menuSubInfo.title = ''
    menuSubInfo.menuLevel = menuMsgInfo.menuLevel + 1
    menuSubInfo.menuType = ''
    msgRef.value.init(new subOpt(), menuSubInfo)
  }

  function saveFun() {
    msgRef.value.validate().then((res) => {
      if (res) {
        // 子菜单
        if (subFlag.value) {
          let params = {
            menuItem: showTab.value, //1为后台菜单，2为小程序菜单 3为APP菜单
            ...menuSubInfo
          }
          menuMgr.saMenuSave(params).then((res) => {
            dt.ui.Message.success('菜单创建成功')
            getPermissionData()
            subFlag.value = false
            menuMsgInfo.parentId = ''
          })
        } else {
          let params = {
            id: menuMsgInfo.id,
            title: menuMsgInfo.title, //菜单名称
            menuType: menuMsgInfo.menuType, //#菜单类型：1-入口，2-按钮
            menuItem: showTab.value //1为后台菜单，2为小程序菜单 3为APP菜单
          }
          menuMgr.saMenuUpdate(params).then((res) => {
            dt.ui.Message.success('菜单修改成功')
            getPermissionData()
            subFlag.value = false
            menuMsgInfo.parentId = ''
          })
        }
      }
    })
  }

  function delFun() {
    dt.ui.Modal.confirm({
      title: '删除菜单',
      content: `确定删除菜单 "${menuMsgInfo.title}" ?`,
      onOk: () => {
        let params = {
          id: menuMsgInfo.id,
          menuItem: showTab.value //1为后台菜单，2为小程序菜单 3为APP菜单
        }
        menuMgr.saMenuDelete(params).then((res) => {
          getPermissionData()
          subFlag.value = false
          menuMsgInfo.parentId = ''
        })
      }
    })
  }

  function cancelFun() {
    subFlag.value = false
    msgRef.value.resetFields()
    msgRef.value.init(new editOpt(), menuMsgInfo)
  }
</script>

<style lang="scss" scoped>
  .menu-content {
    height: 100%;
    .tree-content {
      height: calc(100% - 40px);
      padding: 20px 10%;
      overflow-y: auto;
      overflow-x: hidden;
      .tree {
        max-height: 100%;
      }
    }
  }
  .tree::-webkit-scrollbar {
    width: 0 !important;
  }

  .tree::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
</style>
